<template>
  <div class="cus-login-frame">
    <div class="cus-login-bg" :style="bgStyle" id="cusLoginBg"></div>
    <div class="cus-login-block">
      <div class="cus-title-ctn" id="cusTitleCtn">
        <p class="cus-title-and-version">
          <span class="cus-title">{{ $t("login.leftBottomContent") }}</span>
        </p>
        <p class="cus-sub-title">{{ $t("login.title") }}</p>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="left" label-width="0px"
        class="demo-ruleForm cus-login-container">
        <el-form-item prop="username">
          <el-input ref="username" type="text" v-model="ruleForm.username" name="username" placeholder="请输入账号"
            tabindex="1" autocomplete="on" clearable></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input key="password" ref="password" type="password" v-model="ruleForm.password" name="password"
            tabindex="2" autocomplete="on" placeholder="请输入密码" @keyup.enter.native="handleSubmit" clearable
            show-password></el-input>
        </el-form-item>

        <el-form-item style="width: 100%">
          <el-button type="primary" class="cus-submit-btn" native-type="submit" @click.native.prevent="handleSubmit">{{
      $t("login.logBtn") }}</el-button>
        </el-form-item>
      </el-form>
      <p class="cus-footer"></p>
    </div>
  </div>
</template>

<script>
import API from "../../api";
import { mapActions } from 'pinia';
import { useUserInfoStore } from "../../store";
import md5 from 'js-md5';
import { routes, resetRouter } from '@/router/index';
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: ""
      },
      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      }
    };
  },
  computed: {
    bgStyle() {
      return ` background-image:url(${require("../../assets/img/5811b0c0bd5a7.jpg")})`;
    }
  },
  methods: {
    ...mapActions(useUserInfoStore, ["setUserName","setUserInfo"]),
    handleSubmit(ev) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: this.$t('loading.login'),
            spinner: 'el-icon-loading',
          });
          API.send("login", {
            data: {
              name: this.ruleForm.username,
              pwd: md5(this.ruleForm.password)
            }
          }).then(async (res) => {
            if (res.code !== 200) {
              this.$message.error("登录失败！");
              loading.close();
              return;
            }
            sessionStorage.setItem("token", res.data.token);
            this.setUserName(res.data.user.userName);
            this.setUserInfo(res.data.user);
            loading.close();
            location.reload();
            this.$router.push("/dashboard");
          })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  mounted() {
    //清除菜单
    this.$router.options.routes = [].concat(routes);
    resetRouter(this.$router);
    this.$router.addRoutes(this.$router.options.routes)
  }
};
</script>

<style lang="scss" scoped>
.cus-login-frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  /*垂直居中*/
  justify-content: center;
  /*水平居中*/
  width: 100%;
  height: 100%;
  overflow: auto;
}

.cus-login-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  transition: all linear 0.3s;
  background-repeat: no-repeat;
  background-color: #efefef;
  animation: showLoginBg 1s;
}

.cus-login-block {
  position: relative;
  width: 388px;
  height: 530px;
  padding: 48px;
  background-color: #ffffff;
  margin-right: 700px;
  border: 1px solid rgba(240, 240, 240, 1);
  box-shadow: 0px 3px 6px rgba(7, 181, 182, 0.16);
  border-radius: 4px;
  box-sizing: border-box;
  animation: showLoginCtn 1s;
}

.cus-title-ctn {
  color: #07b5b6;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 40px;

  >p {
    height: 50px;
  }

  .cus-title-and-version {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;

    .cus-version {
      font-size: 14px;
      font-weight: 500;
      color: #cccccc;
    }
  }
}

.cus-login-container {
  .cus-code-input {
    display: flex;
  }

  &::v-deep .el-input__inner {
    border: none;
    border-bottom: 1px solid #cccccc;
    border-radius: unset;
    padding-bottom: 12px;
  }

  &::v-deep input {
    box-shadow: 0 0 0px 1000px white inset;
  }

  .cus-submit-btn {
    width: 100%;
    margin-top: 26px;
    color: #ffffff;
    background-color: #07b6b5;
    border-color: #07b6b5;
  }
}

.cus-footer {
  font-size: 14px;
  text-align: right;

  >span {
    cursor: pointer;
    color: #07b5b6;
  }

  .cus-regist {
    color: #07b5b6;
  }
}

@keyframes showLoginCtn {
  from {
    opacity: 0;
    top: 50px;
  }

  to {
    opacity: 1;
    top: 0;
  }
}

@keyframes showLoginBg {
  from {
    opacity: 0;
    transform: scale(1.1);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>
